<script setup lang="ts">
const props = defineProps<{
    logo: string,
    name: string,
    playNumber: number,
    tags: Array<string>
}>()

</script>

<template>
    <div class="game">
        <div class="game-bg">
            <img :src="props.logo" :alt="props.name" width="100" class="game-bg_img">
        </div>

        <div class="game-info">
            <div class="game-info-logo">
                <img class="game-info-logo_img" :src="props.logo" :alt="props.name" width="100">
            </div>
            <div class="game-details">
                <span class="game-details-name">{{ props.name }}</span>
                <div class="game-details-rate">
                    <span class="game-details-rate_star"></span>
                </div>
                <span class="players">Players: {{ props.playNumber }}</span>
                <div class="tags">
                    <span v-for="tag in props.tags">{{ tag }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.game {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 95%;
    min-height: 44vmin;
    margin: 0 auto;
    margin-top: 2vmin;
    padding: 3vmin;

    &-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 2vmin;
        overflow: hidden;
        z-index: -1;
        box-shadow: 0px 0px 2vmin #797878;

        &::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(255, 255, 255, .4);
        }

        &_img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: blur(7vmin);
            opacity: 0.6;
        }
    }

    &-info {
        position: relative;
        display: flex;
        width: 100%;
        z-index: 1;

        &-logo {
            width: 30vmin;
            height: 30vmin;
            border-radius: 2vmin;
            border: 1vmin solid var(--main-color);
            box-shadow: 0px 0px 2vmin #797878;
            margin-right: 4vmin;

            &_img {
                width: 100%;
                height: 100%;
                border-radius: 2vmin;
            }
        }
    }

    &-details {
        flex: 1;
        padding-top: 2vmin;

        &-name {
            font-size: var(--middle-font-size);
            color: #ffffff;
            text-shadow: 0px 0px 1vmin #333333;
        }

        &-rate {
            width: 30vmin;
            height: 6vmin;
            background-image: url('@/assets/imgs/game/empty.svg');
            background-repeat: repeat-x;
            background-size: auto 100%;
            margin-top: 2vmin;
            margin-bottom: 2vmin;

            &_star {
                display: block;
                width: 82%;
                height: 100%;
                background-image: url('@/assets/imgs/game/fill.svg');
                background-repeat: repeat-x;
                background-size: auto 100%;
            }
        }

        .players {
            font-size: var(--small-font-size);
            color: #1d1d1f;
            text-shadow: 0px 0px 1vmin #333333;
        }

        .tags {
            display: flex;
            flex-wrap: wrap;
            margin-top: 2vmin;

            span {
                display: block;
                padding: 0 2vmin;
                line-height: 1.5;
                background-color: var(--main-color);
                border-radius: 999px;
                font-size: 12px;
                color: #ffffff;
                text-align: center;
                text-transform: uppercase;
                margin-right: 1vmin;
                margin-bottom: 1vmin;
            }
        }
    }
}
</style>